/* From Uiverse.io by kennyotsu-monochromia */
.container {
  position: relative;
  --color: var(--primary-card);
  /* background-color: #f6eedc; */
  background-image: linear-gradient(
      0deg,
      transparent 24%,
      var(--color) 25%,
      var(--color) 26%,
      transparent 27%,
      transparent 74%,
      var(--color) 75%,
      var(--color) 76%,
      transparent 77%,
      transparent
    ),
    linear-gradient(
      90deg,
      transparent 24%,
      var(--color) 25%,
      var(--color) 26%,
      transparent 27%,
      transparent 74%,
      var(--color) 75%,
      var(--color) 76%,
      transparent 77%,
      transparent
    );
  background-size: 55px 55px;
}

/* From Uiverse.io by Praashoo7 */
.button {
  z-index: 10;
  cursor: pointer;
  outline: none;
  /* color: #daa06d; */
  padding: 5px 15px;
  margin-bottom: 20px;
  margin-right: 15px;
  /* border: 2px dashed #daa06d; */
  border: 2px dashed var(--primary-foreground);
  border-radius: 15px;
  /* background-color: #eaddca; */
  background-color: var(--primary-card);
  /* box-shadow: 0 0 0 4px #eaddca, 2px 2px 4px 2px rgba(0, 0, 0, 0.5); */
  box-shadow: 0 0 0 4px var(--primary-foreground),
    2px 2px 4px 2px rgba(0, 0, 0, 0.5);
  transition: 0.1s ease-in-out, 0.4s color;
}

.button:hover {
  transform: translateX(0.1em) translateY(0.1em);
  /* box-shadow: 0 0 0 4px #eaddca, 1.5px 1.5px 2.5px 1.5px rgba(0, 0, 0, 0.5); */
  box-shadow: 0 0 0 4px var(--primary-foreground),
    1.5px 1.5px 2.5px 1.5px rgba(0, 0, 0, 0.5);
}
